<template>
	<view class="page-box">
		<up-swiper v-if="info?.thumb?.length>0" :display-multiple-items="1" :indicatorStyle="{top: '330rpx'}"
			class="swiper" height="400rpx" radius="0rpx" :list="info.thumb" indicator indicatorMode="line"
			keyName="cover" circular></up-swiper>
		<view class="text-info pad-40">
			<view class="font-40">{{info.name}}</view>
			<view class="mar-top-23 font-30">
				<view class="color-error">
					<text>￥</text>
					<text class="font-50 pad-left-right-10 max">{{minOfMins}}</text>
					<text>元起</text>
					<!-- <text>/{{info.unit}}</text> -->
				</view>
			</view>
			<!-- 		<view class="dot flex mar-top-30 gap15">
				<view>慢必赔</view>
				<view>损害包赔</view>
				<view>满意为止</view>
				<view>不计时</view>
				<view>不赚差价</view>
			</view> -->

			<!-- 	<view class="mar-top-30">
				<up-tabs :scrollable="false" :list="tabList" :lineColor="`url(/static/image/tab-icon.png) 100% 100%`"
					lineWidth="20" lineHeight="7" :activeStyle="{
			        color: '#0055FE',
			        transform: 'scale(1.05)'
			    }" :inactiveStyle="{
			        color: '#1D1D1D',
			        transform: 'scale(1)'
			    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
				</up-tabs>
			</view> -->
		</view>
		<view class="parse-box">
			<up-parse :previewImg="false" :content="info.long_text"></up-parse>
		</view>
		<!-- <view class="mar-top-10 bg-white list-box">
			<view v-for="item in 20" class="betweenX list pad-top-bottom-35 pad-left-right-40 centerY">
				<view class="centerXY">
					<image class="head" src="@/static/image/icon10.png" mode=""></image>
					<view class="mar-left-20">
						<view class="font-26">小西瓜momo</view>
						<view class="font-24 color-646464">2024-06-23 14:33</view>
					</view>
				</view>
				<view class="centerY">
					<view class="color-warning mar-right-15">{{rate}}.0</view>
					<up-rate activeColor="#FFC730" inactiveColor="#CCCCCC" :count="5" v-model="rate" readonly></up-rate>
				</view>
			</view>
		</view> -->


		<view class="betweenX button-bottom centerXY">
			<!-- <view class="btn">普通下单</view> -->
			<view @click="hanldeConfirmOrder" class="btn mar-left-20 button-style">立即下单</view>
		</view>

		<!-- 地址弹窗 -->
		<up-popup :show="isPopup" round="20" bgColor="#f4f5f9" closeable @close="isPopup =false">
			<view v-show="isAddress">
				<view class="pad-30 font-36 color-text text-center">选择地址</view>
				<addressList @hanldeNext="hanldeAddressInfo"></addressList>
			</view>
			<view v-if="isWorker">
				<view class="pad-30 font-36 color-text text-center">选择服务人员</view>
				<workerList @hanldeNext="hanldeJumpOrder" @hanldeBack="hanldeBack" :workerData="workerData">
				</workerList>
			</view>
		</up-popup>
		<suspend icon="/static/image/service.jpg"></suspend>
	</view>
</template>

<script setup>
	// 引入decimal.js 保证显示不失真
	import Decimal from 'decimal.js';
	import {
		ref,
		reactive,
		provide
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		string
	} from '../../uni_modules/uview-plus/libs/function/test';
	import {
		workDetail,
		pageListNearby
	} from '@/api/index.js'

	import {
		onHide
	} from '@dcloudio/uni-app'

	// 页面参数
	let props = ref({});

	// 跳转订单
	const hanldeJumpOrder = (data) => {
		data[0].work_ids = [props.value.id]

		uni.navigateTo({
			url: `/pages/order/confirmOrder/confirmOrder?type=shop&data=${JSON.stringify(data)}`
		})
	}

	let zifuan = ref(false);
	const workerOpen = () => {
		zifuan.value = true;
	}

	const isPopup = ref(false);
	const isAddress = ref(false);
	const isWorker = ref(false);
	// 地址信息
	const addressInfo = ref({});
	const workerData = ref([]);
	const hanldeAddressInfo = (data) => {
		isAddress.value = false;

		const params = {
			ps: 100,
			page: 1,
			lat: data.lat,
			lgt: data.lgt,
			num: info.value.min_buy_num,
			work_id: props.value.id
		}

		pageListNearby(params).then(res => {
			workerData.value = res.data.data;
			isWorker.value = true;
		});
	}

	const hanldeBack = () => {
		isAddress.value = true;
		isWorker.value = false;
	}


	// 获取详情数据
	let info = ref({});
	let minOfMins = ref(0);
	onLoad((option) => {
		props.value = option;
		workDetail({
			id: option.id
		}).then(res => {
			info.value = res.data.info;

			let data = res.data.info.reward_lev_detail

			// 提取所有的 min 值
			const minValues = Object.values(data).map(item => item.min);

			// 找到最小的 min 值
			minOfMins.value = Math.min(...minValues);

			// 设置title
			uni.setNavigationBarTitle({
				title: res.data.info.name
			})
		})
	});


	const tabList = reactive([{
			name: '服务介绍',
			id: 1,
		},
		{
			name: '用户评价',
			id: 2,
		}
	])

	// 评价星
	// const rate = ref(2);
	const hanldeConfirmOrder = () => {
		isPopup.value = true;
		isAddress.value = true;
		isWorker.value = false;
	}
</script>

<style scoped lang="scss">
	.max {
		line-height: 40rpx;
	}

	.parse-box {
		padding-bottom: 150rpx;
	}

	.parse-box :deep(._img) {
		display: block !important;
		width: 100% !important;
	}

	.head {
		width: 80rpx;
		height: 80rpx;
	}

	.page-box {
		position: relative;
	}

	.list {
		border-bottom: 1rpx solid #EBEBEB;
	}

	.text-info {
		// margin-top: -38rpx;
		// border-radius: 0 50rpx 0 0;
		background: white;
	}

	.dot>view {
		color: $uni-color-primary;
		background: rgba(0, 85, 254, .1);
		border-radius: 10rpx;
		padding: 8rpx 17rpx;
		font-size: 24rpx;
	}

	.button-bottom {
		width: 100%;
		padding: 35rpx 40rpx;
		box-sizing: border-box;
		background: white;
		position: fixed;
		bottom: 0rpx;
		z-index: 2;
	}

	.btn {
		width: 100%;
		height: 100rpx;
		border-radius: 50rpx;
		border: 2rpx solid #C1C1C1;
		line-height: 100rpx;
		text-align: center;
	}

	.list-box {
		padding-bottom: 150rpx;
	}
</style>